<template>
	<view class="home-wrap">
		<!-- <image src="@/static/images/demo/1.jpg" style="width: 100%;" mode="widthFix"></image> -->
		<image src="@/static/images/home/home.jpg" style="width: 100%;" mode="widthFix"></image>
		<view class="title" style="margin: 40px 0 0;">找到和你</view><view class="title"><view class="orange">興趣相投</view>的人</view>
		<view class="second">在忙碌的學習工作之餘</view>
		<view class="second" style="margin-top: 10px;">多出門交一些有趣的朋友吧～</view>
		<view class="btns flex">
			<view class="btn orange flex-1" @click="openUrl('/pages/addActive/addActive')">馬上加入</view>
			<view style="margin: 0 10px;"></view>
			<view class="btn flex-1" @click="openUrl('/pages/active/active')">瞭解更多</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			
		},
		onReachBottom() {
			
		},
		methods: {
			openUrl(url){
				uni.switchTab({
					url:url
				});
			},
		}
	}
</script>

<style lang="scss">
.home-wrap{
	padding: 50px 30px 30px 30px;
	.btns{
		width: 80%;
		margin: 40px auto 20px;
		.btn{
			// width: 256px;
			height: 40px;
			line-height: 40px;
			border-radius: 20px;
			text-align: center;
			background: 0;
			border: solid 1px #334155;
			color: #334155;
		}
		.orange{
			border: 0;
			background: #ff9517;
			color: #fff;
		}
	}
	.title{
		line-height: 1.3;
		color: #334155;
		font-size: 32px;
		font-weight: 700;
		text-align: center;
		.orange{
			display: inline-block;
			color: #c86604;
			font-size: 32px;
			font-weight: 700;
			text-align: center;
		}
	}
	.second{
		margin-top: 25px;
		text-align: center;
		color: #64748b;
	}
}
</style>
